<template>
    <div class="main-content">
        <div style="display: flex; width: 70%; background-color: white; margin: 30px auto; border-radius: 20px">
            <div style="flex: 1; padding: 0 20px">
                <div style="font-size: 18px; color: #000000FF; line-height: 80px; border-bottom: #cccccc 1px solid">{{typeData.name}}</div>
                <div style="margin: 20px 0">
                    <el-empty
                        v-if="goodsData && goodsData.length <= 0"
                        image-size="300"
                        description="商品即将上架，请耐心等待"
                        ></el-empty>
                    <el-row :gutter="20">
                        <el-col :span="6" style="margin-bottom: 20px" v-for="item in goodsData">
                            <img @click="navTo('/front/detail?id=' + item.id)" :src="item.img" alt="" style="width: 100%; height: 175px; border-radius: 10px; border: #cccccc 1px solid">
                            <div style="margin-top: 10px; font-weight: 500; font-size: 16px; width: 180px; color: #000000FF; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">{{item.name}}</div>
                            <div style="margin-top: 5px; font-size: 20px; color: #FF5000FF">￥ {{item.price}} / {{item.unit}}</div>
                        </el-col>
                    </el-row>
                </div>
            </div>
<!--             猜你喜欢-->
            <div style="width: 250px; padding: 0 20px; border-left: #cccccc 1px solid">
                <div style="font-size: 18px; color: #000000FF; line-height: 80px; border-bottom: #cccccc 1px solid">猜你喜欢</div>
                <div style="margin: 20px 0; padding: 0 10px">
                    <div style="margin-bottom: 20px" v-for="item in recommendData ">
                        <a :href="'/front/detail?id=' + item.id">
                            <img :src="item.img" alt="" style="width: 100%; height: 175px; border-radius: 10px; border: #cccccc 1px solid">
                            <div style="margin-top: 10px; font-weight: 500; font-size: 16px; width: 180px; color: #000000FF; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">{{item.name}}</div>
                            <div style="margin-top: 5px; font-size: 20px; color: #FF5000FF">￥ {{item.price}} / {{item.unit}}</div>
                        </a>

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {

    data() {
        let typeId = this.$route.query.id
        return {
            user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
            typeId: typeId,
            goodsData: [],
            typeData: {},
            recommendData: [],
        }
    },
    mounted() {
        this.loadGoods()
        this.loadType()
    },
    // methods：本页面所有的点击事件或者其他函数定义区
    methods: {
        loadType() {
            this.$request.get('/type/selectById/' + this.typeId).then(res => {
                if (res.code === '200') {
                    this.typeData = res.data
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        loadGoods() {
            this.$request.get('/goods/selectByTypeId?id=' + this.typeId).then(res => {
                if (res.code === '200') {
                    this.goodsData = res.data
                } else {
                    this.$message.error(res.msg)
                }
            });
            this.$request.get('/goods/recommend').then(res => {
                if (res.code === '200') {
                    this.recommendData = res.data
                } else {
                    this.$message.error(res.msg)
                }
            });

        },
        navTo(url) {
            location.href = url
        }
    }
}
</script>